<template>
	<div class="feed-list" v-swipe="swipe" swipe-distance="20" 
		v-infinite-scroll="getFeeds" infinite-scroll-disabled="busy" infinite-scroll-distance="500"
		v-touchend="saveScroll">
		<div class="feed-item" v-for="item in list" v-bind:key="item.id">
			<!-- 普通展示 -->
			<template v-if="item.type == 1">
				<promotion-item v-bind:promotion="item"></promotion-item>
			</template>
			<!-- 猜你喜欢 -->
			<template v-if="item.type == 2">
				<suggest v-bind:recommends="item"></suggest>
			</template>
			<!-- 书籍推荐 -->
			<template v-if="item.type == 3">
				<book v-bind:data="item"></book>
			</template>
			<!-- 知乎书店 -->
			<template v-if="item.type == 4">
				<book-store v-bind:recommends="item"></book-store>
			</template>
		</div>

		<div class="feed-item" v-if="!hasNetwork && showNetworkError">
			<network-error v-on:reload="getFeeds" v-on:ignore="showNetworkError = false"></network-error>
		</div>
	</div>
</template>
<script>
	import NetworkError from 'CommonComponent/network-error'

	import PromotionItem from './promotion-item.vue'
  import Suggest from './suggest.vue'
  import Book from './book.vue'
  import BookStore from './book-store.vue'

	import { mapState, mapActions } from 'vuex'

	export default {
		name: 'feed-list',
		props: {
			'list': {
				required: true,
				type: Array
			}
		},
		data () {
			return {
				busy: false,
				showNetworkError: true
			}
		},
		computed: {
			...mapState({
        hasNetwork: 'hasNetwork'
      })
		},
		methods: {
			...mapActions({
				swipe: 'swipe'
			}),
			getFeeds () {
				this.busy = true;
				this.$store.dispatch('home:getFeedList').then((res) => {
					this.busy = false;
				}, (err) => {
					this.busy = true;
				})
			},
			saveScroll () {
				this.$store.dispatch('home:saveScrollTop', document.body.scrollTop)
			}
		},
		components: {
			'promotion-item': PromotionItem,
      'suggest': Suggest,
      'book': Book,
      'book-store': BookStore,
      'network-error': NetworkError
		}
	}
</script>
<style lang="less">
	.feed-list {
    width: 100%;
    background-color: #F2F4F7;
		padding-top: 60px;
		cursor: pointer; // 兼容QQ浏览器事件不触发 DIV变成可以点击的元素
  }

	.feed-item {
		margin-bottom: 10px;
		&:last-child {
			margin-bottom: 0px;
		}
	}
</style>

